<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background: darkblue;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <!-- 组件显示界面 -->
        <myhead></myhead>
        <parent></parent>
    </div>
    <!-- 组件展示数据 -->
    <template id="parent">
        <div>
            <h2 ref="one">I am Parent 父组件 - 1</h2>
            <h2>word -- {{word}}</h2>
            <h2 @click="count++">count -- {{count}}</h2>
            <p>
                <input type="text" v-model="word">
            </p>
            <button @click = "show=!show">切换{{show?'显示':'隐藏'}}</button>
            <button @click="changeChildOne">通过refs去操作子组件1</button>
            <hr>
            <childone
                :word="word"
                :count = "count"
                ref="child1"
                >
            </childone>
            <hr>
            <childtwo :show="show" ref="child2"></childtwo>
        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone - 1 - 子组件</h2>
            <h2>props - {{word}} - {{count}}</h2>
            <h2>num -- {{num}}</h2>
        </div>
    </template>

    <template id="childtwo">
        <div>
            <h2>childtwo - 2 -子组件</h2>
            <div v-if="show" class="box">我是被父组件控制的</div>
        </div>
    </template>

    <script>
        //组件是用来做标签名的
        //组价修改数据
        //组件名称   组件选项参数
        Vue.component("myhead", {
            template: "<h2>好好学习天天向上</h2>",
        })

        Vue.component("parent", {
            template: "#parent",
            //data属性必须是一个函数  必须有返回值 必须返回一个对象
            data() {
                return {
                    word: "Are you OK?",
                    count: 1000,
                    show: true,
                }
            },
            mounted() {
                // $是静态对象
                this.$refs.one.style.color = "red"
            },
            methods: {
                changeChildOne(){
                    this.$refs.child1.num+=20,
                    this.$refs.child1.greet()
                }
            },
            //放的是基本属性
            //局部注册
            components:{
                childtwo:{
                    template:"#childtwo",
                    props:{
                        show:Boolean,
                    }
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            props:[
                "word",
                'count'
            ],
            methods:{
                greet(){
                    console.log("greeting - - 周末任务");
                }
            },
            data(){
                return {
                    num:2000
                }
            }
        })


        const vm = new Vue({
            data:{
                title:"Vue component 组件通讯(父与子 兄弟)",
            },
            components:{
                first:{
                    template:"<h2>First - vue 组件初始化</h2>"
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title
            }
        }).$mount("#app")
    </script>
</body>

</html>